<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
</head>
<body style="width:80%;margin-left:10%;margin-right:10%;">
<style>.layui-btn {
    padding: 0px 14px 0px 10px
}

.box {
    font-size: 18px;
    color: #4cc134;
    margin: 10px;
    animation: changeshadow 1s ease-in infinite;
    -webkit-animation: changeshadow 1s linear infinite;
    -moz-animation: changeshadow 1s linear infinite;
    -ms-animation: changeshadow 1s linear infinite;
    -o-animation: changeshadow 1s linear infinite
}

@keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #4cc134
    }
    50% {
        text-shadow: 0 0 40px #4cc134
    }
    100% {
        text-shadow: 0 0 4px #4cc134
    }
}

@-webkit-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #4cc134
    }
    50% {
        text-shadow: 0 0 40px #4cc134
    }
    100% {
        text-shadow: 0 0 4px #4cc134
    }
}

@-moz-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #4cc134
    }
    50% {
        text-shadow: 0 0 40px #4cc134
    }
    100% {
        text-shadow: 0 0 4px #4cc134
    }
}

@-ms-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #4cc134
    }
    50% {
        text-shadow: 0 0 40px #4cc134
    }
    100% {
        text-shadow: 0 0 4px #4cc134
    }
}

@-o-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #4cc134
    }
    50% {
        text-shadow: 0 0 40px #4cc134
    }
    100% {
        text-shadow: 0 0 4px #4cc134
    }
}</style>
<td>
    <div class="box" style="text-align: center;font-size: 40px; margin-bottom: 20px;"><span>全网课程大全：<a
            href="https://leaaiv.cn/project-1/doc-1/" style="color:#4cc134;">传送门</a></span>&nbsp;&nbsp;&nbsp;<span
            style="color:#000000;">微信：</span>imax882
    </div>
</td>
<div class="cl-preview-section"><h1 id="移动端概念及ui设计稿尺寸">移动端概念及UI设计稿尺寸</h1>
</div>
<div class="cl-preview-section"><h2 id="一、逻辑像素与物理像素">一、逻辑像素与物理像素</h2>
</div>
<div class="cl-preview-section"><p>
      逻辑像素，也叫“设备独立像素”，对于前端来说就是css中的像素，举例：iphone6下的逻辑像素为375px。</p>
</div>
<div class="cl-preview-section"><p>
      物理像素，即设备屏幕实际拥有的像素点，一个设备生产出来，他们的像素就已经确定了，举例：iphone6下的物理像素为750px。</p>
</div>
<div class="cl-preview-section"><p>  可以发现iphone6下，其物理像素是逻辑像素的2倍，可用“设备像素比”来表示这个比值（即物理像素除以逻辑像素的值），可通过JavaScript代码<code>window.devicePixelRatio</code>来获取设备像素比。
</p>
</div>
<div class="cl-preview-section"><p>
      那究竟逻辑像素与物理像素的关系是什么呢？这里首先先确定什么是相对单位，什么又是绝对单位。像m这种绝对单位，定义是什么：米的长度等于氪－86原子的2P10和5d1能级之间跃迁的辐射在真空中波长的1650763.73倍。查到的m的定义如上，也就是说在现实世界中，m是一个固定的长度。</p>
</div>
<div class="cl-preview-section"><p>
      px全称为pixel，像素长度，像素长度，那么就请问了，一个超大屏幕的像素和你笔记本或者手机屏幕的像素大小相同吗？也就是说1px在你手机屏幕上显示出来的长度可能为0.1mm，在露天演出的电子屏幕上长度为5cm，那么0.1mm和5cm相等吗？</p>
</div>
<div class="cl-preview-section"><p>
      感觉px好像是一个相对单位，但是如果放在网页或者设计人眼中，可能就不一定了，上面举得那个例子是物理像素，在物理像素的背景下，px确实是一个相对单位，但是在逻辑像素上就不同了，css中1px指的是逻辑像素，浏览器会将你的逻辑像素转化成物理像素，每个设备之间虽然物理像素点大小不一样，但是用例逻辑像素的单位后，显示的长度就会一样了。</p>
</div>
<div class="cl-preview-section"><p>
      在开发网页的时候，写了10px，在你的设备上，逻辑1px为真实的1.2个像素大小，实际看上去为10cm，没问题，换一个设备，逻辑1px为真实的2.4个像素大小，也就是说另外一个设备像素大小是你的设备一半，那么对于他来说10px就是24个像素了，但是实际大小仍然为10cm，所以说，在有逻辑像素的概念的前提下，px是一个绝对长度单位。(引自：<a
        href="https://www.zhihu.com/question/48166345/answer/1631677955">知乎</a>)</p>
</div>
<div class="cl-preview-section"><p>总结如下：<br>
    - <strong>逻辑像素：CSS中的像素，绝对单位，保证不同设备下元素的尺寸是相同的</strong>。<br>
    - <strong>物理像素：设备屏幕实际拥有的像素点，相对单位，不同设备下物理像素大小不同</strong>。</p>
</div>
<div class="cl-preview-section"><h2 id="viewport视口">viewport视口</h2>
</div>
<div class="cl-preview-section"><p>  一般移动设备的浏览器都默认设置了一个viewport元标签，定义一个虚拟的布局视口（layout
    viewport），用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为
    980px，所以PC上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。<br>
    <img src="http://szimg.mukewang.com/60fe6e8c0888830306770965.jpg" alt="图片描述"></p>
</div>
<div class="cl-preview-section">
    <div align="center">
        <div>默认viewport</div>
    </div>
</div>
<div class="cl-preview-section"><p>
      上面截图中的方块为100px，但是在iphone6设备的默认视口下显示的非常小，因为默认视口为980px。为了解决这个问题，可通过meta标签来修改视口的尺寸大小（vsCode工具初始创建HTML代码时，自动添加）。</p>
</div>
<div class="cl-preview-section"><pre class=" language-html"><code class="prism  language-html"><span
        class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span
        class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span
        class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span
        class="token attr-name">content</span><span class="token attr-value"><span
        class="token punctuation">=</span><span
        class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span
        class="token punctuation">&gt;</span></span>
</code></pre>
</div>
<div class="cl-preview-section"><p>   <code>width=device-width</code>表示视口宽度为设备的宽，也就是逻辑像素的大小。<code>initial-scale=1.0</code>表示初始缩放比例为1，即正常大小。下面是设置了viewport视口后的样子。<br>
    <img src="http://szimg.mukewang.com/60fe6ea108758daf06770965.jpg" alt="图片描述"></p>
</div>
<div class="cl-preview-section">
    <div align="center">
        <div>设置viewport</div>
    </div>
</div>
<div class="cl-preview-section"><p>   viewport可选的值有：</p>
</div>
<div class="cl-preview-section">
    <div class="table-wrapper">
        <table>
            <thead>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>width</td>
                <td>正整数或devive-width</td>
                <td>定义视口的宽度，单位为像素</td>
            </tr>
            <tr>
                <td>height</td>
                <td>正整数</td>
                <td>定义视口的高度，单位为像素，不常用</td>
            </tr>
            <tr>
                <td>initial-scale</td>
                <td>比例值</td>
                <td>定义初始缩放值</td>
            </tr>
            <tr>
                <td>minimum-scale</td>
                <td>比例值</td>
                <td>定义缩小最小比例</td>
            </tr>
            <tr>
                <td>maximum-scale</td>
                <td>比例值</td>
                <td>定义放大最大比例</td>
            </tr>
            <tr>
                <td>user-scalable</td>
                <td>yes/on</td>
                <td>定义是否允许用户手动缩放页面，默认值yes</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="cl-preview-section"><p>总结如下：<br>
    - <strong>在移动端布局中，一定要提前设置好视口大小，即vsCode默认添加形式，<code>&lt;meta name="viewport"
        content="width=device-width, initial-scale=1.0"&gt;</code>，这样可以保证CSS逻辑像素不会受到缩放处理。</strong></p>
</div>
<div class="cl-preview-section"><h2 id="px的设计稿">750px的设计稿</h2>
</div>
<div class="cl-preview-section"><p>
      通常移动端UI设计稿会按照iphone6的物理像素尺寸大小进行设计，即750px。当然也可以按照逻辑像素进行设计，即375px，但是一般设计师不会这么干，主要为了设计稿更加清晰。</p>
</div>
<div class="cl-preview-section"><p>  所以前端在量取尺寸的时候，需要除以2，才能适配页面中的CSS逻辑像素值。好在现代UI工具如：蓝湖、PxCook等都具备自动除以2的标注信息方式，后面视频有详细介绍。<br>
    <img src="http://szimg.mukewang.com/60fe6eae0811623303600153.jpg" alt="图片描述"></p>
</div>
<div class="cl-preview-section">
    <div align="center">
        <div>PxCook工具自动除以2的标注信息</div>
    </div>
</div>
<div class="cl-preview-section"><p>
      那么如何让唯一的一种设计稿尺寸，去适配不同设备的像素呢？让页面元素能够等比进行放大缩小呢？可通过rem和vw这两种相对单位来进行实现，这也是本章的重点学习内容。</p>
</div>
<div class="cl-preview-section"><p>总结如下：<br>
    - <strong>移动端UI设计稿尺寸大小为750px，即设备的物理像素，可使效果展示更加清晰。</strong><br>
    - <strong>移动端需要实现像素换算和设备适配，以及页面元素等比缩放布局等。</strong></p>
</div>
</body>
</html>
